<!-- 10.18 -->
<template>
	<view class="superior">
		<video @click="clickVideo" class="sup-video" :autoplay="true" :loop="true" :controls="true"
			:show-fullscreen-btn="false" :show-play-btn="false" :show-center-play-btn="true"
			:enable-progress-gesture="true" :src="detail.url"></video>
		<view class="operating dir-left-nowrap">
			<view class="left dir-left-nowrap main-between">
				<view class="goods-list">
					<view class="scroll" v-if="detail.goodslist.length > 0">
						<swiper autoplay class="scroll-view" interval="3000" circular :vertical="true" disable-touch>
							<swiper-item v-for="(item,index) in detail.goodslist" :key="index" v-if="item.length != 0"
								@click="shopDetail(item)">
								<view class="item-good dir-left-nowrap">
									<view class="image-view cover-pic">
										<image class="" :lazy-load="true" :src="item.cover_pic"></image>
										<view class="no-goods" v-if="item.goods_stock == 0 || detail.status == 3">
											已售
										</view>
									</view>
									<view class="content dir-top-nowrap main-between">
										<view class="name t-omit-two">{{item.name}}</view>
										<view class="pri-but dir-left-nowrap main-between cross-bottom">
											<view class="pri">
												<text class="price"
													:class="sign === 'gift' ? theme + '-color '+ theme : getTheme + '-m-text '+ getTheme">定金￥{{item.price}}</text>
												<view class="subtitle">去实体店体验</view>
											</view>
											<view class="button" v-if="item.goods_stock == 0 || detail.status == 3">已售
											</view>
											<view class="button" @click="shopDetail(item)" v-else>查看详情</view>
										</view>
									</view>
								</view>
							</swiper-item>
						</swiper>
					</view>
					<image class="image" :lazy-load="true" src="/static/image/video-goods.png"
						@click="goodBool = !goodBool"></image>
				</view>
			</view>
			<view class="dir-left-nowrap">
				<view class="but" @click.stop="goIndex">
					<view class="icon">
						<image class="image" src="./image/video-index.png"></image>
					</view>
					<text>首页</text>
				</view>
				<view class="but">
					<view class="icon">
						<image class="image" src="./image/video-share.png"></image>
					</view>
					<text>分享</text>
					<button class="share" open-type="share"></button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	let timer
	export default {

		data() {
			return {
				goodBool: false,
				id: 0,
				goods_list: [],
				detail: ''
			}
		},
		onShow() {
			this.goodBool = false
		},
		beforeCreate() {

		},
		mounted() {

		},
		onLoad(options) {
			this.id = options.id
			this.initDetail()

			uni.showShareMenu({
				menus: ['shareAppMessage', 'shareTimeline']
			})
		},
		onShareAppMessage() {
			return this.$shareAppMessage({
				path: '/pages/goods/recodevi',
				params: {
					id: this.id
				}
			});
		},
		onShareTimeline() {
			// 分享朋友圈beta
			return this.$shareTimeline({
				params: {
					id: this.id
				}
			});
		},
		methods: {
			initDetail() {
				this.$request({
					url: this.$api.navs.detail,
					data: {
						id: this.id
					}
				}).then(res => {
					// console.log(res);
					if (res.code == 0) {
						this.detail = res.data.detail
						uni.setNavigationBarTitle({
							title: res.data.detail.title
						})
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			},
			shopDetail(item) {
				if (item.goods_stock != 0) {
					uni.navigateTo({
						url: '/pages/goods/goods?id=' + item.id
					})
				}
			},
			goIndex() {
				uni.reLaunch({
					url: '/pages/index/index'
				})
			},
			// 购物车弹出规格框
			/* specification(goods) {
				this.attrGroup = goods.attr_groups;
				if (this.sign === 'pintuan') {
					this.item = goods;
					this.cartShow = goods.pintuanGoods.is_alone_buy;
					this.show_pt = true;
					this.ptAttr = JSON.parse(JSON.stringify(goods.attr));
					this.ptId = JSON.parse(JSON.stringify(goods.id));
					this.selectGroupAttrId = goods.groups[0].groups.id;
					this.item.id = goods.groups[0].groups.goods_id;
					this.item.attr = goods.groups[0].attr;
					this.show = Math.random();
				} else {
					this.show = Math.random();
					this.item = goods;
				}
			}, */
			clickVideo() {
				this.goodBool = false
			},
		}
	}
</script>

<style scoped lang="scss">
	.superior {
		width: 100%;
		height: 100%;
		position: relative;

		.sup-video {
			width: 100%;
			height: 100vh;
		}

		.sup-list {
			// width: 320rpx;
			width: 410rpx;
			position: absolute;
			bottom: 90rpx;
			left: 32rpx;

			.list-scroll {
				height: 300rpx;
			}

			.list-item {
				width: 100%;
				// height: 80rpx;
				height: 106rpx;
				margin-bottom: 24rpx;
				background-color: #FFFFFF;
			}
		}
	}

	.operating {
		position: fixed;
		bottom: 56rpx;
		left: 0;
		width: 100%;
		z-index: 1402;
	}

	.left {
		margin-left: #{26upx};
		width: #{361upx};
		// width: #{410upx};
	}

	.right {
		margin-right: #{26upx};
	}

	.attr {
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 1403;
	}

	.goods-list {
		width: #{124upx};
		height: #{124upx};
		border-radius: #{62upx};
		background-color: rgba(51, 51, 51, .4);
		margin-left: #{20upx};
		position: relative;

		.image {
			width: #{68upx};
			height: #{78upx};
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}
	}

	.index {
		margin-left: #{20upx};
	}

	.cart {
		margin: #{0 30upx};
	}

	.but {
		text-align: center;
		position: relative;
		margin-left: 64rpx;

		.icon {
			width: #{70upx};
			height: #{70upx};
			border-radius: #{35upx};
			background-color: rgba(51, 51, 51, .4);
			position: relative;
		}

		.image {
			width: #{38upx};
			height: #{36upx};
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}

		text {
			color: #ffffff;
			font-size: #{24upx};
			line-height: 1;
		}
	}

	.share {
		background: transparent;
		border: none;
		border-radius: 0;
		padding: 0;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}

	.scroll {
		/* width: #{690upx};
		height: #{240upx};
		position: fixed;
		left: 50%;
		bottom: #{214upx};
		transform: translate(-50%, 0%); */
		width: 658rpx;
		position: absolute;
		bottom: 164rpx;
	}

	.scroll-view {
		// height: calc(100% - #{23upx});
		background-color: #ffffff;
		border-radius: #{16upx};
		padding: #{0 25upx};
		// height: 300rpx;
		// max-height: 840rpx;
		// overflow-y: scroll;
		height: 200rpx;
		overflow-x: scroll;

		.item-good {
			padding-top: #{25upx};
			overflow: hidden;
			border-top: 1rpx solid #e0e0e0;

			&:first-child {
				border-top: none;
			}

			.image-view {

				position: relative;

				/* >view {
					width: #{150upx};
					height: #{30upx};
					line-height: #{30upx};
					position: absolute;
					bottom: 0;
					font-size: #{18upx};
					color: #ffffff;
					text-align: center;
					background: linear-gradient(to left, #ffcb00, #ff9600);
				} */
			}
		}

		.cover-pic {
			width: #{150upx};
			height: #{150upx};
			position: relative;

			image {
				width: 100%;
				height: 100%;
			}

			.no-goods {
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				width: 100%;
				height: 100%;
				background-color: rgba(0, 0, 0, 0.3);
				// background-color: rgba($color: #000000, $alpha: 0.5);
				// backdrop-filter: blur(9px);
				margin: 0 auto;
				font-size: 36rpx;
				text-align: center;
				line-height: 150rpx;
				color: #FFFFFF;
				font-weight: bold;

				.no-title {
					width: 124rpx;
					height: 124rpx;
					border-radius: 50%;
					background-color: rgba($color: #000000, $alpha: 0.5);
					backdrop-filter: blur(9px);
					font-size: 36rpx;
					text-align: center;
					line-height: 124rpx;
					color: #FFFFFF;
					font-weight: bold;
					position: absolute;
					left: 50%;
					top: 50%;
					transform: translate(-50%, -50%);
				}
			}
		}

		.content {
			width: calc(100% - #{150upx});
			min-height: #{150upx};
			margin-bottom: #{25upx};
			padding-left: #{25upx};
		}

		.name {
			line-height: #{32upx};
			font-size: #{24upx};
			color: #303030;
			margin-top: #{8upx};
		}

		.pri-but {

			>.button {
				/* width: #{50upx};
				height: #{50upx};
				background-image: url("../../static/image/icon/add-to.png");
				background-size: 100% 100%;
				background-color: #333;
				background-repeat: no-repeat;
				margin: #{0 4upx 0 0};
				border-radius: #{25rpx}; */
				border-radius: 70rpx;
				font-size: 24rpx;
				font-weight: 100;
				border: 2rpx solid #e59c26;
				padding: 10rpx 20rpx;
			}

			.pri {
				line-height: #{21upx};
				margin-top: #{9upx};
			}

			.price {
				font-size: #{21upx};
				line-height: 1;
			}

			.original {
				// color: #999999;
				font-size: #{21upx};
				line-height: 1;
				// text-decoration: line-through;
				margin-left: #{15upx};
			}

			.subtitle {
				margin: 8rpx 0;
				font-size: 20rpx;
				color: rgba(0, 0, 0, 0.8);
				font-weight: 600;
			}
		}

		.member-price {
			margin-right: #{12upx};
		}
	}

	.triangle {
		width: #{40upx};
		border-top: #{23upx} solid #ffffff;
		border-bottom: #{23upx} solid transparent;
		border-left: #{23upx} solid transparent;
		border-right: #{23upx} solid transparent;
		position: absolute;
		left: 10%;
		transform: translateX(-50%);
	}

	.floting {
		position: fixed;
		right: 40rpx;
		top: 156rpx;
		width: 138rpx;

		.flot-window {
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			align-items: center;
			position: relative;
			width: 100%;
			height: 200rpx;
			overflow: hidden;

			.addgold {
				color: #ffae3c;
				font-size: 24rpx;
				position: absolute;
				top: -36rpx;
				opacity: 0;

				// height: 30rpx;
				animation: floatup 0.8s 1;

				@keyframes floatup {
					from {
						top: 36rpx;
						opacity: 1;
					}

					to {
						opacity: 0;
						top: -36rpx;
					}
				}
			}

			.gold {
				// position: relative;
				// top: 110rpx;
				// width: 104rpx;
				// height: 90rpx;
				margin-top: 36rpx;

				width: 90rpx;
				height: 90rpx;
				background-color: #ffea00;
				box-shadow: 0 0rpx 2rpx 0rpx #e2cf00;
				border-radius: 50%;
				text-align: center;
				line-height: 90rpx;
				color: #ffc410;
				font-size: 24rpx;
				text-shadow: 0 0rpx 2rpx #d3a20d;
			}

			.envelope {
				// position: relative;
				// top: 70rpx;
				animation: envelope 1.8s 1;

				@keyframes envelope {
					0% {
						top: 120rpx;
						transform: scaleY(1);
					}

					20% {
						top: 20rpx;
						transform: scaleY(1);
					}

					70% {
						top: 20rpx;
						transform: scaleY(1);
					}

					80% {
						top: 20rpx;
						transform: scaleY(1);
					}

					90% {
						top: 70rpx;
						transform: scaleY(0.9);
					}

					100% {
						top: 70rpx;
						transform: scaleY(1);
					}
				}

				.cover {
					width: 104rpx;
					height: 126rpx;
				}

				.btn {
					// position: absolute;
					// top: 20rpx;
					// left: calc(50% - 25rpx);
					width: 50rpx;
					height: 50rpx;
					animation: btn 0.3s 4;
					animation-direction: alternate;

					@keyframes btn {
						from {
							transform: scale(1);
						}

						to {
							transform: scale(0.6);
						}
					}
				}
			}
		}

		.bottom {
			width: 100%;
			height: 42rpx;
			background: linear-gradient(180deg, #ffe6ac 0%, #ffb66e 100%);
			border-radius: 92rpx;
			font-size: 20rpx;
			font-weight: 500;
			line-height: 42rpx;
			text-align: center;
			color: #854c00;
		}
	}
</style>
